<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>名单考勤</text>
			<view style="font-size: 30rpx;line-height: 70rpx;">*点击班级可切换且左滑可查看请假信息</view>
		</view>
		<u-popup :show="show" :round="30" @close="close" closeOnClickOverlay overlayOpacity=0 duration=800>
			<view style="height: 1300rpx;">


				<view class="top">
					<view mode="selector" style="display: inline-block;height: 100%; margin-left: 20rpx;" v-if="!flag">
						<u-picker :show="clocingShow" defaultIndex="0" @cancel="cancel" closeOnClickOverlay="true"
							:columns="classes" keyName="cname" @confirm="classesChange" @close="cpicker"></u-picker>
						<view style="margin-left: 20rpx;font-size: 40rpx;font-weight: bold; float: left;
							margin-top: 20rpx;color: #6b6b6a;">
							<button @click="showtj=!showtj" :disabled="flag" size="mini" plain="true" class="top-btn"
								style="color: black;border: 4rpx solid #6b6b6a; border-radius: 25rpx;
								 color: #6b6b6a;">统计</button>
						</view>
						<view @click="clocingShow = true" class="bj">
							<text>{{classes[0][index].cname}}</text>
						</view>
					</view>

					<view style="display: inline-block; float: right;margin-right: 50rpx;margin-top: 20rpx;">
						<button @click="confirm()" :disabled="flag" size="mini" plain="true" class="top-btn" style="color: black;border: 4rpx solid #6b6b6a; border-radius: 25rpx;
							 color: #6b6b6a;">提交</button>
					</view>
				</view>
				<view v-if="showtj==true" class="footer">
					<text class="footer-info">已到:{{arrivecount}}</text>
					<text class="footer-info">旷课:{{allTruancy}}</text>
					<text class="footer-info">请假:{{allLeave}}</text>
					<text class="footer-info">迟到:{{allLate}}</text>
					<text class="footer-info">早退:{{allEarly}}</text>
				</view>
				<view v-if="flag">
					<view style="margin-top: 60%; width: 100%;text-align: center;">
						<text style="font-weight: bolder;font-size: larger;text-align: center;">暂无信息</text>
					</view>
				</view>
				<view style="margin-top: 30rpx;" v-else>
					<u-list height="1180rpx">
						<u-swipe-action>
							<u-list-item>
								<u-swipe-action-item :options="options1" v-for="(student, index) in students"
									:key="index" @click="openPop(student)">
									<view class="info">
										<view class="info-top">
											<text
												style="display: inline-block;margin-right: 30rpx;">{{student.sname}}</text>
											<text>{{student.stuid}}</text>
											<view style="display: inline-block;float: right;margin-right: 20rpx;">
												<text v-if="student.status == 1" style="color: #19BE6B;">已到</text>
												<text v-if="student.status == 2" style="color: #4786FF;">请假</text>
												<text v-if="student.status == 3" style="color: #FFA647;">迟到</text>
												<text v-if="student.status == 4" style="color: #C4C4C3;">早退</text>
												<text v-if="student.status == 5" style="color: #FE315D;">旷课</text>
											</view>
										</view>
										<view style="margin-top: 12rpx;">
											<button @click="modifyStatus(student, 4)" size="mini" class="btn-u"
												plain="true"
												style="color: #C4C4C3;border: 4rpx solid #C4C4C3;border-radius: 25rpx;"
												hover-class="btn-hover">早退</button>
											<button @click="modifyStatus(student, 3)" size="mini" class="btn-u"
												plain="true"
												style="color: #FFA647;border: 4rpx solid #FFA647;border-radius: 25rpx;"
												hover-class="btn-hover">迟到</button>
											<button @click="modifyStatus(student, 2)" size="mini" class="btn-u"
												plain="true"
												style="color: #4786FF;border: 4rpx solid #4786FF;border-radius: 25rpx;"
												hover-class="btn-hover">请假</button>
											<button @click="modifyStatus(student, 1)" size="mini" class="btn-u"
												plain="true"
												style="color: #19BE6B;border: 4rpx solid #19BE6B;border-radius: 25rpx;"
												hover-class="btn-hover">已到</button>
											<button @click="modifyStatus(student, 5)" size="mini" class="btn-u"
												plain="true"
												style="color: #FE315D;border: 4rpx solid #FE315D;border-radius: 25rpx;"
												hover-class="btn-hover">旷课</button>
										</view>
									</view>
								</u-swipe-action-item>
								<u-popup mode="bottom" :show="showLeave" @close="closeLeave" @open="openLeave"
									overlayOpacity="0.1" closeable>
									<view style="height: 80%;">
										<view style="width: 100%;">
											<view style="padding-left: 5%;padding-top: 3%;">
												<view style="text-align: center;">
													<text style="font-weight: bolder;color: #6b6b6a;">请假信息</text>
												</view>
												<view style="margin-top: 5%;">
													<text style="font-weight: bolder;">请假时间:</text>
													<view>
														<text style="font-weight: bolder;">{{leaveInfo.time}}</text>
													</view>
												</view>
												<view style="margin-top: 5%;">
													<text style="font-weight: bolder;">请假原因:</text>
													<view>
														<textarea maxlength="200" disabled="true" cols="30" style=""
															:value="leaveInfo.reason"></textarea>
													</view>
												</view>
											</view>
										</view>
										<view style="margin-top: 10%;">
											<u--image :showLoading="true" :src="src" width="100%"
												@click="previewImage(src)"></u--image>
										</view>
									</view>
								</u-popup>
							</u-list-item>
						</u-swipe-action>
					</u-list>


				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		HNIT_URL,
		IDENTITY
	} from '../../../constants';
	export default {
		data() {
			return {
				options1: [{
					text: '请假信息',
					style: {
						backgroundColor: '#3c9cff'
					}
				}],
				showtj: false,
				showclasspicker: false,
				show: true,
				students: [],
				username: "",
				index: 0,
				classesInfo: [],
				classes: [
					[]
				],
				// 已到总人数
				arrivecount: 0,
				// 请假总数
				allLeave: 0,
				// 旷课总数
				allTruancy: 0,
				// 早退总数
				allEarly: 0,
				// 迟到总数
				allLate: 0,
				attId: 0,
				records: [],
				reClocking: [],
				flag: false,
				clocingShow: false,
				colorStyle: {
					color: '#A9E08F'
				},
				showLeave: false,
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				leaveInfo: {
					time: "",
					reason: "",
					imagepath: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}
			}
		},
		mounted() {
			this.username = uni.getStorageSync("name");
			this.queryClasses();
			setTimeout(tmp => {
				if (this.classes.length > 0) {
					this.queryStudents();
				} else {
					this.flag = true
				}
			}, 1000)


		},
		methods: {
			previewImage(src) {
				let srcList = [];
				srcList.push(src)
				uni.previewImage({
					urls: srcList
				})
			},
			// 打开弹框
			openPop(student) {
				if (!student.leaveId || student.status != 2) {
					uni.showToast({
						title: "该学生未请假",
						icon: "none",
						duration: 2000
					})
					return;
				}
				this.$request.get(HNIT_URL + "wx/leave/get/" + student.leaveId).then(res => {
					this.leaveInfo = res.data;
					this.leaveInfo.time = this.leaveInfo.requestStart + " ~ " + this.leaveInfo.requestEnd;
					this.src = HNIT_URL + "uploadfile/" + this.leaveInfo.imagepath.replaceAll(/\\/g, "/");
				})
				this.showLeave = true;
			},
			openLeave() {

			},
			// 关闭弹框
			closeLeave() {
				this.showLeave = false;
			},
			// 关闭选择器
			cpicker() {
				this.clocingShow = false
			},
			// 返回上一页
			close() {
				if (uni.getStorageSync(IDENTITY) == 4) {
					uni.reLaunch({
						url: "../../../pages/manage/home/index"
					})
				} else {
					uni.reLaunch({
						url: '../../../pages/teacher/home/index'
					});
				}

			},
			// 查询当前上课班级的学生
			queryClasses() {
				this.$request.get(HNIT_URL + "wx/classInfo/get/" + this.username).then(res => {
					this.classesInfo = res.data;
					if (this.classesInfo != null && this.classesInfo.length > 0) {
						this.classesInfo.forEach(item => {
							let cls = {
								cname: item.cname,
								id: item.id
							}
							this.classes[0].push(cls)
						})
					}
				})
			},
			cancel() {
				this.clocingShow = false;
			},
			queryStudents() {
				if (this.classes[0].length <= 0) {
					uni.showToast({
						title: "暂无班级上课",
						icon: "none",
						duration: 5000
					})
					return;
				}
				// 根据当前班级id查询出学生
				this.reClocking = [];
				this.arrivecount = 0;
				this.allLeave = 0;
				this.allLate = 0;
				this.allTruancy = 0;
				this.allEarly = 0;
				let param = {
					cid: this.classes[0][this.index].id
				}
				this.$request.get(HNIT_URL + "wx/studentInfo/get/" + this.username, param).then(res => {
					this.students = res.data.studentInfoList;
					// 考勤attId == 0 默认当前学生已到 否则是重复考勤
					this.attId = res.data.attId
					if (this.students.length > 0) {
						if (this.attId == 0) {
							this.arrivecount = this.students.length;
							this.students.forEach(student => {
								student.status = 1
								if (student.leaveId) {
									student.status = 2
									this.allLeave++;
									this.arrivecount--;
								}
							})
						} else {
							this.students.forEach(student => {
								if (student.status == 1) {
									this.arrivecount++;
								} else if (student.status == 2) {
									this.allLeave++;
								} else if (student.status == 3) {
									this.allLate++;
								} else if (student.status == 4) {
									this.allEarly++;
								} else if (student.status == 5) {
									this.allTruancy++;
								}
							})

						}
					}
					if (this.students.length <= 0) {
						this.flag = true;
					}
				})

			},
			// 修改学生考勤状态
			modifyStatus(student, status) {
				// 修改footer的统计
				if (status == 1) {
					this.arrivecount++;
				} else if (status == 2) {
					this.allLeave++;
				} else if (status == 3) {
					this.allLate++;
				} else if (status == 4) {
					this.allEarly++;
				} else if (status == 5) {
					this.allTruancy++;
				}
				if (student.status == 1) {
					this.arrivecount--;
				} else if (student.status == 2) {
					this.allLeave--;
				} else if (student.status == 3) {
					this.allLate--;
				} else if (student.status == 4) {
					this.allEarly--;
				} else if (student.status == 5) {
					this.allTruancy--;
				}
				student.status = status;
				let flag = true;
				this.reClocking.forEach(item => {
					if (item.stuid == student.stuid) {
						item.status = student.status;
						flag = false;
					}
				})
				if (flag) {
					this.reClocking.push(student);
				}
				this.$forceUpdate()
			},
			// 修改所选班级
			classesChange(e) {
				if (this.index == e.indexs[0]) {
					return;
				}
				// 重置已到人数
				this.reClocking = [];
				this.arrivecount = 0;
				this.allLeave = 0;
				this.allLate = 0;
				this.allTruancy = 0;
				this.allEarly = 0;
				this.index = e.indexs[0]
				// 根据当前班级id查询出学生
				this.queryStudents();
				this.clocingShow = false;
			},
			// 提交考勤信息
			confirm() {
				if (this.students.length <= 0 || this.classes[0].length <= 0) {
					uni.showToast({
						title: "暂无班级上课",
						icon: "none",
						duration: 2000
					})
					return;
				}
				let params = {
					classId: this.classes[0][this.index].id,
					arrivecount: this.arrivecount
				}
				this.records = [];
				setTimeout(tmp => {
					// 如果attId == 0 就是新增 否则修改
					if (this.attId == 0) {
						// 批量插入 考勤详情
						this.$request.post(HNIT_URL + "wx/attendance/add/" + this.username, params).then(res => {
							this.attId = res.data;
							this.students.forEach(student => {
								let record = {
									attid: this.attId,
									stuid: student.stuid,
									leaveid: student.leaveId,
									status: student.status
								}
								this.records.push(record);
							})
							uni.request({
								url: HNIT_URL + "wx/records/add/" + this.username,
								method: 'POST',
								data: this.records,
								header: {
									'Content-Type': 'application/json'
								},
								success: function(res) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000 //持续时间为 2秒
									})
								}
							})
						})
					} else {
						this.$request.post(HNIT_URL + "wx/attendance/add/" + this.username, params).then(res => {
							this.attId = res.data;
							// 修改考勤详细
							this.reClocking.forEach(student => {
								let record = {
									//此处有修改
									attid: this.attId,
									id: student.id,
									leaveId: student.leaveId,
									status: student.status
								}
								this.records.push(record);
							})

							let classId = this.classes[0][this.index].id
							// let paramss={
							// 	username:this.username,
							// 	classId:this.classes[0][this.index].id,
							// 	attendanceRecords:this.records

							// 			}
							// this.$request.post(HNIT_URL + "wx/records/teacher/modify/" + this.username, paramss).then(res=>{
							// 	uni.showToast({
							// 		title: res.data.msg,
							// 		icon: 'none',
							// 		duration: 2000    //持续时间为 2秒
							// 	})	
							// })
							uni.request({
								url: HNIT_URL + "wx/records/teacher/modify/" + this.username +
									"/" + classId,
								method: 'POST',
								data: this.records,
								header: {
									'Content-Type': 'application/json'
								},
								success: function(res) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000 //持续时间为 2秒
									})
									if (res.data.code) {
										setTimeout(res => {
											uni.reLaunch({
												url: '/pages/student/home/index'
											});
										}, 2000)

									}
								}
							})
							this.reClocking = []
						})
					}
				}, 100)

			}
		}
	}
</script>

<style lang="scss">
	.u-safe-area-inset-bottom {
		padding: 0;
	}

	.info {
		padding-bottom: 20rpx;
		border-bottom: 1rpx #120f6d solid;
		margin-top: 20rpx;
	}

	.bj {
		width: 200rpx;
		float: left;
		margin-left: 110rpx;
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #0055ff;
		text-decoration: underline;
	}

	.toptitle {
		margin-top: 100rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: aquamarine;
		text-align: center;
	}

	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		position: fixed;
		width: 80rpx;
		margin-top: 10rpx;
		height: 60rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	page {
		/* background-color: #eeeeee; */
		background: linear-gradient(to top, #55aaff 0%, #120f6d 100%);
		background-size: 100% 200%;
		animation: aurora 10s infinite;

	}

	@keyframes aurora {
		0% {
			background-position-y: 0;
		}

		50% {
			background-position-y: 100%;
		}

		100% {
			background-position-y: 0;
		}
	}

	// 顶部按钮
	.top-btn {
		display: inline-block;
		float: right;
		font-weight: bolder;
		font-size: larger;
	}

	// 考勤状态按钮
	.btn-u {
		display: inline-block;
		margin-left: 20rpx;
		font-weight: bold;
	}

	// 考勤信息
	.info-top {
		font-weight: bolder;
		margin-left: 10rpx;
	}

	// 顶部班级
	.top {
		width: 100%;
		height: 96rpx;
	}

	// 按钮按下之后样式
	.btn-hover {
		border-bottom-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	// 页脚统计框
	.footer {
		background-color: white;
		height: 70rpx;
		color: #848484;
	}

	.footer-info {
		line-height: 80rpx;
		margin-left: 6%;
		font-weight: bolder;
	}
</style>
